<template>
  <div class="">
    <el-card>
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form :inline="true" size="small" label-width="120px">
            <el-row>
              <el-col :span="24">
              <el-form-item label="订单状态：">
                <el-radio-group v-model="params.status" type="button" @change="getList(1)">
                  <el-radio-button label="">全部 </el-radio-button>
                  <el-radio-button  label="1">待同步</el-radio-button>
                  <el-radio-button  label="2">进行中</el-radio-button>
                  <el-radio-button  label="3">已成功</el-radio-button>
                  <el-radio-button  label="-1">失败</el-radio-button>
                </el-radio-group>
              </el-form-item>
              </el-col>
              <el-col :span="24">
              <el-form-item label="创建时间：">
                <el-radio-group
                  v-model="params.date"
                  type="button"
                  class="mr20"
                  size="small"
                  @change="selectChange()"
                >
                  <el-radio-button
                    v-for="(item,i) in fromList.fromTxt"
                    :key="i"
                    :label="item.val"
                  >{{ item.text }}</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="params.createtime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  size="small"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="自定义时间"
                  style="width: 250px;"
                  @change="onchangeTime"
                />
              </el-form-item>
              </el-col>
            </el-row>

            <div v-show="box">

              <el-form-item label="订单编号">
                  <el-input clearable v-model="params.sn"  placeholder="请输入订单编号" />
              </el-form-item>
              <el-form-item label="收货电话">
                  <el-input clearable v-model="params.post_mobile"  placeholder="请输入收货电话" />
              </el-form-item>
              <el-form-item label="订购号码">
                  <el-input clearable v-model="params.phone"  placeholder="请输入订购号码" />
              </el-form-item>
              <el-form-item label="姓名">
                  <el-input clearable v-model="params.name"  placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item label="结算类型">
                <el-select v-model="params.goods_jslx" clearable placeholder="请选择">
                  <el-option v-for="(item,index) in jslxlist" :label="item.txt" :value="item.val" />
                </el-select>
              </el-form-item>
              <el-form-item label="订单来源">
                  <el-select  clearable   v-model="params.from"  placeholder="请选择订单来源">
                      <el-option  :label="item.txt" :value="item.val" v-for="(item,index) in fromst" />
                  </el-select>
              </el-form-item>

              <el-form-item label=" ">
                <el-button type="primary"  size="small" class="searchBtn" @click="handleSearch" icon='el-icon-search'>查 询</el-button>
                <el-button type="info"  @click="handleRet" plain>重置</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div style="text-align:right;">
          <el-button type="primary" size="small" @click="down" plain><i class="el-icon-download" /> 批量导出</el-button>
 <!-- <el-button   type="warning" size="small" class="ml10" @click="importorder" plain><i class="el-icon-upload" /> 导入下单</el-button> -->
        </div>
      </div>
      <!-- table改版 start -->
      <div class="app-center" v-loading="loading" element-loading-spinner="el-icon-loading">
        <div class="item" v-for="(item,index) in list">
          <div class="item-top">
            <el-row>
              <el-col :span="6">订单编号：{{item.sn}}</el-col>
              <el-col :span="6">订购号码：{{item.phone}}</el-col>
              <el-col :span="6">订单状态：{{item.status_txt}}</el-col>
              <el-col :span="6">下单时间：{{item.createtime}}</el-col>
            </el-row>
          </div>
          <div class="item-center">
            <div class="item-image">
              <img :src="item.goods.image" />
            </div>
            <div class="item-right"> 
              <div>商品名称: {{item.goods.name}}</div>
              <div>结算类型: 
                <span v-if="item.goods.jslx === 1">日结</span>
                <span v-else-if="item.goods.jslx === 2">月结</span>
              </div>
              <div>客户姓名：{{item.name}}</div>
              <div>客户电话：{{item.post_mobile}}</div>
              <div>身份证号：{{item.card}}</div>
              <div>号码归属：{{item.phone_province}}-{{item.phone_city}}</div>
              <div>收货地区：{{item.post_province}}-{{item.post_city}}-{{item.post_district}}</div>
              <div>详细地址：{{item.post_addr}}</div>
              <div>快递信息：{{item.logistics_company}}-{{item.logistics_no}}</div>
              <div>订单来源：{{item.from_text}}</div>
              <div>首充金额: {{item.sc_money}}</div>
              <div>我的佣金: {{item.fee_text[0]}}</div>
              <div>订单备注：<span style="color:#ca8700">{{item.status_msg}}</span></div>
            </div>
          </div>
        </div>
        <div class="item-empty" v-if="nodata">
          <div>
            <i class="el-icon-search" style="font-size: 60px;"></i>
          </div>
          <div style="margin-top: 20px;">很遗憾，没有搜索到数据</div>
        </div>
        <div class="pagination">
          <el-pagination
            :current-page="params.page"
            :page-size="10"
            background
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 改版 end -->
    </el-card>

    <el-dialog title="导入下单"
    :visible.sync="dialogVisiblep"
    :close-on-click-modal="false"
    center  width="40%">
      <el-form  :model="sub"  label-width="110px">
        <el-form-item label="上传文件" style="margin-top: 30px;">
            <el-upload
              action=""
              :limit="1"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              accept="*"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :http-request="uploadExcel"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传EXCEL文件，且不超过3M，每次最多50条数据<span class="ml10" @click="seeMbp">【查看模板】</span></div>
            </el-upload>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblep = false">取 消</el-button>
        <el-button type="primary" @click="subFormp">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { order_list,order_export,common_upload,order_importOrder } from  '@/api/agent'
  import { fromList } from '@/libs/select.js'

  export default {
    data() {
      return {
        box:true,
        total:0,
        nodata:false,
        loading:true,
        emtypetxt:'',
        list: [],
        fromList: fromList,
        jslxlist: [{
					val: '1',
					txt: '日结'
				}, {
					val: '2',
					txt: '月结'
				}],
        params: {
          status:'',
          date:'all',
          createtime:[],
          sn:'',
          phone:'',
          name:'',
          from:'',
          page: 1,
          pagesize:10,
        },
        fromst:[{val:'1',txt:'落地页'},{val:'2',txt:'API接口'},{val:'3',txt:'导入'}],
        sub:{
          file:'',
        },
        fileList: [],//上传的文件
        dialogVisiblep:false,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(page) {
        this.params.page = page?page:this.params.page;
        this.emtypetxt='加载中...';
        this.loading=true;
        order_list(this.params).then(res => {
          this.list=res.data.list
          this.total=res.data.total
          this.loading = false
          if(this.list.length==0){
            this.emtypetxt='暂无数据'
            this.nodata=true
          }else{
            this.nodata=false
          }
        })
      },
      // 时间筛选
      selectChange(tab) {
        this.params.createtime= [];
        this.getList(1);
      },
      onchangeTime(e) {
        this.params.date = 'all';
        this.params.createtime = e;
        this.getList(1);
      },
      handleSearch(){
        this.getList(1)
      },
      //分页
      handleSizeChange(val) {
          this.params.pagesize = val
          this.getList(1)
      },
      handleCurrentChange(val) {
          this.params.page = val
          this.getList()
      },
      changebox(){
        this.box=!this.box;
      },
      handleRet(){
        this.params={
          status:'',
          date:'all',
          createtime:[],
          sn:'',
          phone:'',
          name:'',
          from:'',
          page: 1,
          pagesize:10,
        }
        this.getList()
      },
      down(){
        const loading = this.$loading({
            lock: true,
            text: '正在导出...',
            spinner: 'el-icon-loading',
            background: 'rgba(20, 20, 20, 0.7)'
        });
        order_export(this.params).then(res => {
          const { export_json_to_excel } = require('../../assets/js/Export2Excel');
          const tHeader = res.data.header;
          const filterVal =res.data.filter;
          const list = res.data.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '号卡订单-'+new Date().toLocaleString());
          loading.close();
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

      //上传文件开始
      handleExceed(files, fileList) {
        this.$message.warning(`每次只能上传1个文件`);
      },
      handleRemove(file, fileList) {
          this.sub.file=''
      },
      beforeUpload (file) {
        if(file.size>1024*1024*5){
          this.$message.warning('文件不能大于3M')
          return false;
        }
        const isText = file.type === 'application/vnd.ms-excel';
        const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isText && !isTextComputer) {
          this.$message.warning('请上传excel格式文件！');
        };
        return (isText || isTextComputer);
      },
      importorder(){
        this.dialogVisiblep=true
        this.sub.file=''
        this.fileList=[]
      },
      subFormp(){
        if(!this.sub.file){
          return this.$message.warning('请上传文件');
        }
        const loading = this.$loading({
            lock: true,
            text: '处理中...',
            spinner: 'el-icon-loading',
            background: 'rgba(20, 20, 20, 0.7)'
        });
        order_importOrder(this.sub).then(res => {
          if(res.code==9){
            this.$message.error(res.msg);
            loading.close();
          }else{
            this.$message.success(res.msg);
            this.getList()
            this.dialogVisiblep=false
            loading.close();
          }
        })
      },
      seeMbp(){
        window.open('/uploads/demo_import.jpg');
      },
      uploadExcel (item) {
        const sub = new FormData();
        sub.append('file',item.file);
        common_upload(sub).then(res => {
          this.$message.success('上传成功');
          this.sub.file=res.data.fullurl
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .el-upload__tip{
    color:#afafaf;
  }
	.label-mr{
		margin-right: 30px;
	}
	.app-top{
		border:1px solid #eaeaea;
		.top-slist{
			display: flex;
			justify-content: space-between;
			background-color:#e9f0fa;
			height:40px;
			line-height: 40px;
			.top-select-left{
				display: flex;
				div{
					font-size: 14px;
					width:100px;
					text-align: center;
					cursor: pointer;
				}
				.top-select{
					background-color:#fff;	
					color:#bf5e90;
					font-weight: 600;
				}
			}
			.top-select-right{
				margin-right: 10px;
			}
			
		}
		.top-form{
			padding:26px 20px 6px;
		}

	}
	.app-center{
		margin-top: 20px;
		font-size: 14px;
		.item{
			padding-bottom: 10px;
			border:1px solid #eceaea;
			margin-bottom:8px;
			.item-top{
				padding: 10px 20px;
				background-color:#f3f7fb;
			}
			.item-center{
				margin-top: 16px;
				padding: 0px 20px;
				display: flex;
				.item-image{
					img{
						width:120px;
						height:80px;
					}
				}
				.item-right{
					display: flex;
					justify-content: flex-start; 
					flex-wrap: wrap;  
					div{
						margin-left:20px;
						width:300px;
					}
				}
				
			}
		}
		.item-empty{
			margin-top:100px;
			text-align: center;
			color:#b3b3b3;
		}
	}
	.app-bottom{
		
	}
</style>